<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<body>
<div id="app">
   <todo>                     <!--['title']   vm里的值-->
       <todo-titil slot="todo-title":title="title"></todo-titil>
       <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                   :item="item" v-bind:index="index"
                   v-on:remove="removeItems(index)" :key="index"></todo-items>
   </todo>
</div>

<script>

  Vue.component("todo",{
    template: '<div>\
                 <slot name="todo-title"></slot>\
                 <ul>\
                     <slot name="todo-items"></slot>\
                 </ul>\
               </div>'
      /*'<div>'+
        '<slot></slot>'+//<p1>
        '<ul>'+
        '<slot></slot>'+//<li>
        '</ul>'+
      '</div>'*/
  });

  Vue.component("todo-titil",{
      props: ['title'],
      template: '<div>{{title}}</div>'
  });

  Vue.component("todo-items",{
      props: ['item','index'],              /*@=v-on*/
      //只能绑定当前组件的方法
      template: '<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
      methods:{
          remove:function (index)
          {
              //this.$emit 自定义事件分发
              this.$emit('remove',index);
          }
      }
  });

  var vm = new Vue(
          {
            el:"#app",
            data:{
                title:"撒大大",
              todoItems:['asd','2sdasd','dwdfa']
            },
              methods:{
                  removeItmes:function (index)
                  {
                     this.todoItems.splice(index,1);
                  }
              }
          });
</script>
</body>
</html>